<template>
	<view class="order">
		<view class="top">
			<scroll-view scroll-x="true" class="scroll-X" :scroll-into-view="navId" scroll-with-animation>
				<view :class="active==index?'navactive':'nav'" v-for="(item,index) in typeList" :key="index"
					@click="changeType(item,index)">
					{{item.name}}
					<view class="line" v-if="active==index"></view>
				</view>
			</scroll-view>
		</view>
		<view class="list" v-for="v in list" :key="v.id" :data-v="v" @click="toDetails">
			<view class="title">
				<view class="t">订单编号：{{v.orderno}}</view>
				<view class="">{{arr[v.status]}}</view>
			</view>
			<view class="flex_list">
				<view class="l_left">
					<view class="l_img">
						<image v-if="v.ticket.image" :src="http+v.ticket.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="l_right">
					<view class="texts1">
						{{v.ticket.title}}
					</view>
					<view class="t_bottom">
						{{v.spec}}
					</view>
					<view class="l_right_flex">
						<view class="money">
							￥{{v.oneprice}}
						</view>
						<view class="num">
							<text>x</text>{{v.number}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="!list.length <= 0" :status="statusshow"></uni-load-more>
		<view class="kong" v-if="list==''">
			<view class="">
				<view class="kong_img">
					<image src="../../static/mine/kong.png" mode=""></image>
				</view>
				<view class="kong_text">
					还没有订单，赶快去下单吧
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				typeList: [{
						id: 1,
						name: '全部',
						status: '',
					},
					{
						id: 2,
						name: '待付款',
						status: 1,
					},
					{
						id: 3,
						name: '待核销',
						status: 2,
					},
					{
						id: 4,
						name: '进行中',
						status: 3,
					}, {
						id: 5,
						name: '已完成',
						status: 4,
					},
					{
						id: 6,
						name: '已取消',
						status: 0,
					}
				],
				arr: ['已取消', '待付款', '待核销', '制作中', '申请退款', '已退款', '拒绝退款', '延时退款', '待修坯', '待施釉', '待烧制', '待发货', '待收货',
					'已完成'
				], ////状态:0=已取消,1=待付款,2=待兑换,3=制作中,4=申请退款,5=已退款,6=拒绝退款,7=延时退款,8=待修坯,9=待施釉,10=待烧制,11=待发货,12=待收货,13=已完成
				http: this.$httpimg,
				list: [],
				params: {
					mid: 0,
					page: 1,
					limit: 10,
					status: '',
				},
				statusshow:'loading'
			}
		},
		onLoad(option) {
			this.params.status = option.status
			this.active = option.index
			if (uni.getStorageSync('user')) {
				this.params.mid = uni.getStorageSync('user').id
				this.$post('user/ticketOrderList', this.params).then(res => {
					if (res.code == -3) {
						uni.showToast({
							title: '用户不存在请重新登录',
							icon: 'none',
							mask: true
						})
						uni.clearStorage()
						setTimeout(() => {
							uni.switchTab({
								url: '../index/index'
							})
						}, 1200)
					}
					if (res.code == -4) {
						uni.showToast({
							title: '用户已被禁用',
							icon: 'none',
							mask: true
						})
						setTimeout(() => {
							uni.switchTab({
								url: '../index/index'
							})
						}, 1200)
					}
				})
				this.getlist()
			}
		},
		onReachBottom() {
			this.params.page++
			this.getlist()
		},
		onShareAppMessage(e) {
			return {
				title: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			getlist(){
				this.statusshow = 'loading'
				this.$post('user/ticketOrderList', this.params).then(res => {
					if (res.code == 0) {
						this.list.push(...res.data.list)
						this.statusshow = 'no-more'
					}
				})
			},
			changeType(item, index) {
				this.active = index
				this.list = []
				this.params.page = 1
				this.params.status = item.status
				this.getlist()
			},
			toDetails(e) {
				let v = e.currentTarget.dataset.v
				uni.navigateTo({
					url: 'details?id=' + v.id
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.order {
		.kong {
			margin-top: 160rpx;
			display: flex;
			justify-content: center;

			.kong_img {
				width: 360rpx;
				height: 300rpx;
			}

			.kong_text {
				color: #CCCCCC;
				text-align: center;
				font-size: 30rpx;
			}
		}

		.top {
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-top: 1px solid #eee;
			height: 110rpx;
			display: flex;
			align-items: center;
			position: sticky;
			top: 0%;

			.scroll-X {
				width: 100%;
				white-space: nowrap;
				box-sizing: border-box;
			}

			.nav {
				font-size: 32rpx;
				color: #333333;
				padding: 16rpx 40rpx;
				display: inline-flex;
				position: relative;
			}

			.navactive {
				font-size: 32rpx;
				padding: 16rpx 40rpx;
				display: inline-flex;
				position: relative;
				color: #FF7416;
				font-weight: bold;
			}

			.line {
				position: absolute;
				width: 20%;
				height: 5rpx;
				background-color: #FF7416;
				bottom: 0%;
				left: 40%;
			}
		}

		.list {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			padding: 26rpx 30rpx;
			box-sizing: border-box;
			margin: 30rpx auto;
			.title {
				border-bottom: 1px solid #eee;
				padding-bottom: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF7416;
				display: flex;
				justify-content: space-between;
				.t{
					color: #333333;
				}
			}
			.flex_list {
				margin-top: 24rpx;
				display: flex;
			}
			.l_left {
				.l_img {
					width: 190rpx;
					height: 190rpx;
					border-radius: 16rpx;

					image {
						border-radius: 16rpx;
					}
				}
			}

			.l_right {
				flex: 1;
				margin-left: 26rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.l_right_flex {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.texts1 {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
				}

				.t_bottom {
					color: #AAAAAA;
					font-size: 24rpx;
					margin-top: 20rpx;
				}

				.type {
					font-size: 24rpx;
					color: #fcc521;
					font-weight: 500;
				}

				.money {
					font-size: 34rpx;
					font-weight: 500;
					color: #333333;
				}

				.num {
					font-size: 28rpx;
					font-weight: 500;
					color: #AAAAAA;

					text {
						font-size: 26rpx;
					}
				}
			}

		}
	}
</style>